<template>
  <div class="app-conprinter">
    <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
      <el-form-item
        prop="print01"
        label="生产标签打印机:"
        label-width="130px"
        :rules="[
          { required: true, message: '请选择生产标签打印机', trigger: 'blur' }
        ]"
      >
        <el-select
          v-model.trim="formInline.print01"
          clearable
          filterable
          placeholder="生产标签打印机"
          @visible-change="isReload()"
          style="min-width: 310px;"
          size="medium"
        >
          <el-option v-for="value in printList" :key="value.id" :label="value.name" :value="value.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="print02"
        label="出库单打印机:"
        label-width="130px"
        :rules="[
          { required: true, message: '请选择出库单打印机', trigger: 'blur' }
        ]"
      >
        <el-select
          v-model.trim="formInline.print02"
          clearable
          filterable
          placeholder="出库单打印机"
          @visible-change="isReload()"
          style="min-width: 310px;"
          size="medium"
        >
          <el-option v-for="value in printList" :key="value.id" :label="value.name" :value="value.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 20px;margin-top: 20px;">
        <el-button type="primary" size="medium" @click="onSubmit('formInline')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { query,insert } from "@/api/user";
import getLodop from '@/lodop/LodopFuncs';
var LODOP;
export default {
  data() {
    return {
      formInline: {
        type: 1,
        print01: '',
        print02: '',
        key: [],
        value: [],
        userId: '',
        region: ''
      },
      printList: [], //打印机列表
      username: '',
      timer: null,
    }
  },
  created() {
    this.formInline.userId = JSON.parse(window.localStorage.getItem("saber-userInfo")).content.account;
  },
  mounted() {
    this.getList();
  },
  watch: {
    'printList'() {
    }
  },
  methods: {
    // 获取当前用户的打印机设备
    getList() {
      this.formInline.key = '[1,2]';
      query(this.formInline).then(res => {
        if(res.data.msg == '执行成功') {
          res.data.data[0].value = `${res.data.data[0].value}`;
          this.formInline.value = JSON.parse(res.data.data[0].value);
          this.formInline.print01 = this.formInline.value[0];
          this.formInline.print02 = this.formInline.value[1];
          console.log(res.data.data[0].value,'000','this.formInline.value',this.formInline.value);
        }
      })
    },
    // 保存打印机
    onSubmit(formName) {
      this.formInline.value = [];
      this.formInline.key = '[1,2]';
      this.formInline.value = `["${this.formInline.print01}","${this.formInline.print02}"]`;
      console.log('this.formInline',this.formInline);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insert(this.formInline).then(res => {
            if(res.data.msg == '执行成功') {
              this.getList();
              this.$message.success("打印机设置成功");
            }
            this.$refs[formName].resetFields();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 选择框下拉时间
    isReload() {
      this.getPrinterCount();
    },
    // 获取打印机设备
    getPrinterCount(){
      this.printList = [];
      LODOP = getLodop();
      var iPrinterCount = LODOP.GET_PRINTER_COUNT();
      for(var i = 0;i < iPrinterCount;i++) {
        var option = document.createElement('option');
        option.innerHTML = LODOP.GET_PRINTER_NAME(i);
        option.value = i;
        // console.log('option.value',option.value,'option.value',option,'option.innerHTML',option.innerHTML);
        this.printList.push({'id': option.value,'name': option.innerHTML});
      }
      if(this.printList.length == 0) {
        this.$message.warning("请到Windows设置中的设备模块中添加打印机");
      }
      // console.log('this.printList',this.printList)
    }
  }
}
</script>

<style lang="scss">
  .app-conprinter {
    margin: 30px !important;
    // margin-left: 20px;
    .el-form {
      display: flex !important;
      flex-direction: column;
    }
  }
  body {
    .el-select-dropdown {
        .el-scrollbar {
            .el-select-dropdown__wrap.el-scrollbar__wrap {
                .el-scrollbar__view.el-select-dropdown__list {
                    margin-bottom: 17px;
                }
            }
        }
    }
  }
</style>
